<table class="table table-bordered" id="myTable_cpu">

      <thead class="thead-dark">
        <tr>
          <th scope="col">#</th>
          <th scope="col">设备名</th>
          <th scope="col">接口名</th>
          <th scope="col">最大出向利用率</th>
          <th scope="col">当前出向利用率</th>
        </tr>
      </thead>
      <tbody id ="myTable_cpu">
        {% for device in top_3_if_utilization_tx_dict %}
        <tr>
          <th scope="row" align="center" valign="center" >{{ forloop.counter }}</th>
          {# 设备名称 #}
          <td align="center" valign="center" style="color:black"><strong>{{ device.name }}</strong></td>
          {# 接口名称 #}
          <td align="center" valign="center" style="color:black"><strong>{{ device.ifname }}</strong></td>
          {# 最大出向接口利用率 #}
          {# 根据最大出向接口利用率, 调整进度条颜色与长度 #}
          {% if device.tx_max >= 70 %}
          <td align="center" valign="center">
              <div class="progress">
                {# progress-bar为进度条, bg-danger为颜色, width为长度, <div>中间</div>为进度条内显示的内容 #}
                <div class="progress-bar bg-danger" role="progressbar" style="width: {{ device.tx_max }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ device.tx_max }}%</div>
              </div>
          </td>
          {% elif device.tx_max >= 30 %}
          <td align="center" valign="center">
              <div class="progress">
                <div class="progress-bar bg-warning" role="progressbar" style="width: {{ device.tx_max }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ device.tx_max }}%</div>
              </div>
          </td>
          {% else %}
          <td align="center" valign="center">
              <div class="progress">
                <div class="progress-bar bg-success" role="progressbar" style="width: {{ device.tx_max }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ device.tx_max }}%</div>
              </div>
          </td>
          {% endif %}
          {# 当前出向接口利用率 #}
          {# 根据当前出向接口利用率, 调整进度条颜色与长度 #}
          {% if device.tx_current >= 70 %}
          <td align="center" valign="center">
              <div class="progress">
                {# progress-bar为进度条, bg-danger为颜色, width为长度, <div>中间</div>为进度条内显示的内容 #}
                <div class="progress-bar bg-danger" role="progressbar" style="width: {{ device.tx_current }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ device.tx_current }}%</div>
              </div>
          </td>
          {% elif device.tx_current >= 30 %}
          <td align="center" valign="center">
              <div class="progress">
                <div class="progress-bar bg-warning" role="progressbar" style="width: {{ device.tx_current }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ device.tx_current }}%</div>
              </div>
          </td>
          {% else %}
          <td align="center" valign="center">
              <div class="progress">
                <div class="progress-bar bg-success" role="progressbar" style="width: {{ device.tx_current }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ device.tx_current }}%</div>
              </div>
          </td>
          {% endif %}
        {% endfor %}
      </tbody>
    </table>